<template>
	<z-paging ref="paging" v-model="list" @query="getData" :loading-more-enabled="false">
		<template slot="top">
			<u-tabs :current="current" @change="setCurrent"
				:list="[{ name: '已通过' }, { name: '待审核' }, { name: '未通过' }]" lineHeight="8rpx"
				lineWidth="70rpx" :scrollable="false"></u-tabs>
		</template>
		<template v-if="current === 0">
			<view class="d-p-l-30 d-p-r-30">
				<view class="d-flex d-p-t-20 d-p-b-20 item" v-for="(item, index) in list" :key="index">
					<u-avatar size="100rpx" :src="item.member_photo"></u-avatar>
					<view class="d-flex-1 d-p-l-20">
						<view class="d-flex">
							<view class="d-flex-1">
								<view class="d-font-28">{{ item.member_name || '' }}{{ item.member_sex || '' }}</view>
								<view class="d-font-26 d-be d-m-t-10">{{ item.member_phone || '' }}</view>
								<view class="d-font-26 d-be d-m-t-10">身份证号:{{ item.member_idCard || '' }}</view>
							</view>
							<view class="d-flex">
								<view class="d-m-r-38" @click="addFamily_detail(item.id)"><u-image src="/static/e.png"
										width="28rpx" height="28rpx"></u-image></view>
								<!-- <view @click="(actionId = item.member_id), (show.del = true)"><u-image
										src="/static/d.png" width="28rpx" height="28rpx"></u-image></view> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>
		<template v-if="current === 1">
			<view class="d-p-l-30 d-p-r-30">
				<view class="d-flex d-p-t-20 d-p-b-20 item" v-for="(item, index) in list" :key="index">
					<u-avatar size="100rpx" :src="item.member_photo"></u-avatar>
					<view class="d-flex-1 d-p-l-20">
						<view class="d-flex">
							<view class="d-flex-1">
								<view class="d-font-28">{{ item.member_name || '' }}{{ item.member_sex || '' }}</view>
								<view class="d-font-26 d-be d-m-t-10">{{ item.member_phone || '' }}</view>
								<view class="d-font-26 d-be d-m-t-10">身份证号:{{ item.member_idCard || '' }}</view>
							</view>
							<view class="d-flex">
								<view class="d-m-r-38" @click="addFamily_detail(item.id)"><u-image src="/static/e.png"
										width="28rpx" height="28rpx"></u-image></view>
								<!-- <view @click="(actionId = item.member_id), (show.del = true)"><u-image
										src="/static/d.png" width="28rpx" height="28rpx"></u-image></view> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>
		<template v-if="current === 2">
			<view class="d-p-l-30 d-p-r-30">
				<view class="d-flex d-p-t-20 d-p-b-20 item" v-for="(item, index) in list" :key="index">
					<u-avatar size="100rpx" :src="item.member_photo"></u-avatar>
					<view class="d-flex-1 d-p-l-20">
						<view class="d-flex">
							<view class="d-flex-1">
								<view class="d-font-28">{{ item.member_name || '' }}{{ item.member_sex || '' }}</view>
								<view class="d-font-26 d-be d-m-t-10">{{ item.member_phone || '' }}</view>
								<view class="d-font-26 d-be d-m-t-10">身份证号:{{ item.member_idCard || '' }}</view>
							</view>
							<view class="d-flex">
								<view class="d-m-r-38" @click="addFamily_detail(item.id)"><u-image src="/static/e.png"
										width="28rpx" height="28rpx"></u-image></view>
								<!-- <view @click="(actionId = item.member_id), (show.del = true)"><u-image
										src="/static/d.png" width="28rpx" height="28rpx"></u-image></view> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>
		<d-mode :show="show.del" content="确认删除此被监护人吗？" @cancel="confirmDel" @confirm="show.del = false" cancel-text="确认删除"
			confirm-text="我再想想"></d-mode>
		<template slot="bottom">
			<view class="d-p-l-30 d-p-r-30 d-p-b-20 d-p-t-20">
				<u-button type="primary" shape="circle" :custom-style="{
						height: '80rpx',
						fontSize: '30rpx',
						background: '#59A0FF'
					}" @click="addFamily">
					添加被监护人
				</u-button>
			</view>
		</template>
	</z-paging>
</template>

<script>
	import {
		mList,
		mDel,
		m_list
	} from '@/common/api';
	export default {
		data() {
			return {
				list: [],
				show: {
					del: false
				},
				actionId: '',
				current: 0,
				status:1
			};
		},
		onShow() {
			try {
				this.$refs.paging.reload(false)
			} catch (e) {}
		},
		methods: {
			setCurrent(e) {
				console.log(e.index,'pp[]')
				if (e.index == 0) {
					this.status = 1
				} else if(e.index == 1){
					this.status = 0
				} else if(e.index == 2){
					this.status = 2
				}
				this.current = e.index;
				this.$refs.paging.reload(false);
			},
			getData() {
				m_list({
					status:this.status
				})
					.then(res => {
						this.$refs.paging.complete(res);
					})
					.catch(err => {
						this.$refs.paging.complete(false);
					});
					
				// mList()
				// 	.then(res => {
				// 		this.$refs.paging.complete(res);
				// 	})
				// 	.catch(err => {
				// 		this.$refs.paging.complete(false);
				// 	});
			},
			confirmDel() {
				this.show.del = false;
				mDel({
					member_id: this.actionId
				}).then(res => {
					uni.$u.toast('已删除');
					this.$refs.paging.reload(false);
				});
			},
			addFamily_detail(id = '') {
				uni.$u.route({
					url: '/pages/mine/addFamily_detail',
					params: {
						id
					}
				});
			},
			addFamily(id = '') {
				uni.$u.route({
					url: '/pages/mine/addFamily',
					params: {
						id
					}
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #f3f3f3;
		color: #333;

		.item {
			background: #ffffff;
			box-shadow: 0rpx 13rpx 57rpx 0rpx rgba(8, 73, 162, 0.11);
			border-radius: 16rpx;
			margin-top: 20rpx;
			padding: 0 10rpx;

			.tags {
				height: 36rpx;
				background: #f3f3f3;
				border-radius: 18rpx;
				display: inline-block;
				padding: 0 20rpx;
			}

			.bold {
				font-weight: bold;
			}

			.p {
				position: relative;
			}

			.qd {
				width: 52rpx;
				height: 52rpx;
				position: absolute;
				right: 0;
				bottom: 0;

				image {
					width: 52rpx;
					height: 52rpx;
				}
			}
		}

		.d-be {
			color: #bebebe;
		}
	}
</style>